<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Unify Admin Amis</title>
    <!-- 引入 Amis 的 CSS 文件 -->
    <link rel="stylesheet" href="./jssdk/sdk.css"/>
    <link rel="stylesheet" href="./jssdk/helper.css"/>
    <link rel="stylesheet" href="./jssdk/iconfont.css"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <style>
        body {
            background-image: url('./img/login-background.svg');
            background-repeat: no-repeat;
            background-position: center 110px;
            background-size: 100%;
            width: 100%;
            height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .login-container {
            padding-top: 10px;
            width: 400px;
            margin: auto;
        }

        .logo-section {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 96px 0 8px 0;
        }

        .logo-section img {
            margin-right: 8px;
            width: 48px;
        }

        .logo-section span {
            font-size: 32px;
            font-weight: bold;
        }

        .description {
            width: 100%;
            text-align: center;
            color: rgba(0, 0, 0, 0.45);
            margin-bottom: 40px;
        }

        .forgot-password-block {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }

        .forgot-password {
            float: right;
            user-select: none;
        }

        .action {
            margin-bottom: 40px;
        }
    </style>
</head>

<body>
<div class="logo-section">
    <img src="./img/favicon.png" alt="logo">
    <span>Unify Admin Amis</span>
</div>
<div class="description">
    Amis 是一个低代码前端框架，可以减少页面开发工作量，极大提升效率
</div>
<div id="login-form" class="login-container"></div>
<script src="./jssdk/sdk.js"></script>
<script src="./common.js"></script>
<script>
    (function () {
        let amis = amisRequire('amis/embed');
        amis.embed('#login-form', {
            id: "login-form",
            type: 'form',
            mode: "horizontal",
            "wrapWithPanel": false,
            horizontal: {
                leftFixed: true,
                justify: true,
            },
            title: '账户密码登录',
            api: {
                url: WEBSITE_HOST + '/unify/User/login',
                method: 'post',
                requestAdaptor: function (api, context) {
                    if (context.password === '******') {
                        let userRemember = JSON.parse(localStorage.getItem('user_remember'));
                        if (userRemember) {
                            context.password = userRemember.password;
                        } else {
                            context.password = CryptoJS.MD5(context.password).toString();
                        }
                    }else{
                        context.password = CryptoJS.MD5(context.password).toString();
                    }
                    localStorage.setItem('user_remember', JSON.stringify({
                        'username': context.username,
                        'password': context.remember?context.password:null,
                    }));
                },
                adaptor: "payload.status = payload.code == 200?0:payload.code;localStorage.setItem('user_token',payload.code == 200?payload.data.token:'');return payload;",
            },
            redirect: '/index.html',
            body: [
                {
                    type: 'input-text',
                    name: 'username',
                    label: '用户名',
                    placeholder: '用户名',
                    required: true,
                    value: ""
                },
                {
                    type: 'input-password',
                    name: 'password',
                    label: '密码',
                    placeholder: '密码',
                    required: true,
                    value: ""
                },
                {
                    type: 'checkbox',
                    name: 'remember',
                    label: '保存密码',
                    value: false
                },
                {
                    type: 'submit',
                    label: '登录',
                    level: 'primary',
                    block: true
                },
            ],
            "onEvent": {
                "inited": {
                    "actions": [
                        {
                            "actionType": "custom",
                            "script": (context, doAction, event) => {
                                let user = JSON.parse(localStorage.getItem('user_remember'));
                                if (user) {
                                    doAction({
                                        actionType: 'setValue',
                                        componentId: 'login-form',
                                        args: {
                                            value: {
                                                remember: user.password ? true : false,
                                                username: user.username,
                                                password: user.password ? '******' : '',
                                            }
                                        }
                                    });
                                }
                            }
                        },
                    ]
                }
            }
        });
    })();
</script>
</body>

</html>